<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <style type="text/css">
        body {
            overflow: hidden;
            -ms-content-zooming: none;
        }
    </style>
</head>
<body>
    <canvas id="myChart" style="display:block;"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var dataSet = [12, 19, 3, 5, 2];
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Lamp X', 'Lamp XS', 'Moderm Light', 'Lamp M3', 'Table HD Lamp'],
                datasets: [{
                    data: dataSet,
                    backgroundColor: [
                        'rgba(255,99,132,0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    position: 'left',
                    display: true

                },
                responsive: true
            }
        });
    </script>
</body>
</html>
